<template>
  <div class="mvList">
    <div v-for="item in MVList" :key="item.id" class="mvItem">
      <mv-item :playCount="item.playCount" :picUrl="item.imgurl" :name="item.name" :nickname="item.nickname"></mv-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import mvItem from '../../../components/songItem.vue'
import { onMounted, ref } from 'vue'
import axios from '@/http'
import { useRoute } from 'vue-router'
onMounted(() => {
  getMVList()
})
const route = useRoute()
const more = ref<boolean>(true)
const MVList = ref([])
const offset = ref(0)
const getMVList = () => {
  const { id } = route.params
  axios
    .get('/artist/mv', {
      params: { id, limit: 30, offset: offset.value }
    })
    .then(res => {
      console.log(res)

      offset.value++
      MVList.value = [...MVList.value, ...res.data.mvs]
      more.value = res.data.hasMore
    })
}
const timer = ref(null)
const freshData = e => {
  const { scrollTop, scrollHeight } = e.target
  if (timer.value) {
    clearTimeout(timer.value)
  }
  timer.value = setTimeout(() => {
    if (scrollTop + 650 > scrollHeight) {
      more.value && getMVList()
    }
  }, 200)
}
</script>

<style scoped lang="less">
.mvList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 36px;
  justify-content: space-between;
  .mvItem {
    flex-basis: 236px;
    position: relative;
  }
}
</style>